<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    width="850px">
    <el-form
      :model="model"
      ref="form"
      label-width="0px"
    >
      <table border="1" cellpadding="0" cellspacing="0" class="list-body">
        <thead>
        <tr>
          <td style="width: 50px">名次</td>
          <td>金额</td>
          <td style="width: 50px">名次</td>
          <td>金额</td>
          <td style="width: 50px">名次</td>
          <td>金额</td>
          <td style="width: 50px">名次</td>
          <td>金额</td>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td class="content-box">
            <el-form-item prop="1" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[1]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>6</td>
          <td class="content-box">
            <el-form-item prop="6" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[6]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>11</td>
          <td class="content-box">
            <el-form-item prop="11" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[11]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>16</td>
          <td class="content-box">
            <el-form-item prop="16" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[16]" class="none-border"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>2</td>
          <td class="content-box">
            <el-form-item prop="2" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[2]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>7</td>
          <td class="content-box">
            <el-form-item prop="7" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[7]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>12</td>
          <td class="content-box">
            <el-form-item prop="12" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[12]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>17</td>
          <td class="content-box">
            <el-form-item prop="17" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[17]" class="none-border"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>3</td>
          <td class="content-box">
            <el-form-item prop="3" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[3]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>8</td>
          <td class="content-box">
            <el-form-item prop="8" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[8]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>13</td>
          <td class="content-box">
            <el-form-item prop="13" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[13]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>18</td>
          <td class="content-box">
            <el-form-item prop="18" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[18]" class="none-border"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>4</td>
          <td class="content-box">
            <el-form-item prop="4" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[4]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>9</td>
          <td class="content-box">
            <el-form-item prop="9" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[9]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>14</td>
          <td class="content-box">
            <el-form-item prop="14" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[14]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>19</td>
          <td class="content-box">
            <el-form-item prop="19" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[19]" class="none-border"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>5</td>
          <td class="content-box">
            <el-form-item prop="5" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[5]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>10</td>
          <td class="content-box">
            <el-form-item prop="10" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[10]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>15</td>
          <td class="content-box">
            <el-form-item prop="15" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[15]" class="none-border"></el-input>
            </el-form-item>
          </td>
          <td>20</td>
          <td class="content-box">
            <el-form-item prop="20" :rules="[
                  { required: true, message: '必填' }
                  ]">
              <el-input v-model="model[20]" class="none-border"></el-input>
            </el-form-item>
          </td>
        </tr>
        </tbody>
      </table>
    </el-form>
    <div slot="footer" style="display: flex;justify-content: center;">
      <el-button type="primary"
                 @click="cancel">取消
      </el-button>
      <el-button type="primary"
                 @click="submit">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { setReward, getReward } from '../api'

export default {
  name: 'view-dialog',
  data () {
    return {
      dialogVisible: false,
      id: undefined,
      type: 'invite',
      model: {
        1: '',
        2: '',
        3: '',
        4: '',
        5: '',
        6: '',
        7: '',
        8: '',
        9: '',
        10: '',
        11: '',
        12: '',
        13: '',
        14: '',
        15: '',
        16: '',
        17: '',
        18: '',
        19: '',
        20: ''
      }
    }
  },
  computed: {
    title () {
      return '推广榜默认金额'
    }
  },
  methods: {
    handleClose (done) {
      done()
    },
    async open () {
      const { data } = await getReward({ type: this.type })
      console.log(data)
      const setting = {}
      data.forEach(({ key, money }, index) => (setting[index + 1] = money / 100))
      Object.assign(this.model, setting)
      this.dialogVisible = true
      return new Promise((resolve) => {
        this._resolve = resolve
      })
    },
    cancel () {
      this.close()
    },
    close () {
      this._resolve({ refresh: true })
      this.dialogVisible = false
    },
    async submit () {
      await this.$refs.form.validate()
      const params = Object.values(this.model).map((item) => item * 100)
      await setReward({ type: this.type }, params)
      this.close()
      this.$message.success('更新成功')
    }
  }
}
</script>

<style scoped lang="scss">
  .list-body {
    width: 100%;
    text-align: center;
    border-color: #f6f6f6;
    td {
      height: 50px;
      div {
        input {
          border: none !important;
        }
      }
    }
    .content-box {
      padding-top: 22px;
    }
  }
</style>
